<template>
	<div class="actual-main">	
		<section class="section-item">	
			<dy-select></dy-select>
		</section>
		<section class="section-item section-table">	
			<dy-up :opt="upData"></dy-up>
			<div :class="[{'on': nowTitle.quotaType == 4}, 'cc']">
				<div class="item-part" @click="chooseType({name:'90天回款率', quotaType: 4})">
					<chart :options="gauge1" theme="roma"></chart>	
					<div class="gauge-name">90天回款率</div>
				</div>
				<div class="item-part" @click="chooseType({name:'90天回款率', quotaType: 4})"> 
					<!-- <p v-if="parseInt(actualData.repay90RatioDiff) > 0" class="up"><i class="icon icon-shangsheng"></i> {{numFormat(actualData.repay90RatioDiff)}}</p>
					<p v-else class="down"><i class="icon icon-xiajiang"></i>{{actualData.repay90RatioDiff}}</p> -->
					<p class="actual-pay">实还本金 {{numFormat(actualData.repay90Actual)}}</p>
					<p class="will-pay">应还本金 {{numFormat(actualData.repay90Must)}}</p>
				</div>
			</div>
		</section>
		<section class="section-item">	
			<div class="title">{{nowTitle.name}}趋势</div>					
			<chart v-if='Object.keys(line1).length > 0' :options="line1" theme="roma" class='line-charts'></chart>		
			<div class="no-tip" v-else>数据为空</div>
		</section>
		<section class="section-item">
			<div v-if="Object.keys(lineDetail).length && isPie" class="title">{{nowTitle.name}}分析</div>	
			<chart v-if="Object.keys(lineDetail).length && isPie" :options="pie1" theme="roma"></chart>
			<dy-line v-show="isPie" opt="actualDetail"></dy-line>	
		</section>
	</div>
</template>
<script>
import dicts from '@/utils/dicts'
import {merge, Event, numFormat, classifyNum} from '@/utils/index'
export default {
	name: 'loans',
	data () {	 
		return {				
			numFormat: numFormat,
			trendPost: {},				
			actualPost: {},
			gauge1: {},
			pie1: {},
			line1: {},
			upData: [],
			actualData: {},
			isPie: true
		}
	},
	computed: {
		orgId () {
			return this.$store.getters.orgId
		},
		lineDetail () {
			return this.$store.getters.lineDetail
		},
		nowTitle () {
			return this.$store.getters.nowTitle
		},
	},
	watch : {
		orgId ()  {
			this.updata();
		},
		lineDetail (val) {
			if(Object.keys(val).length > 0) {
				let pie1 = {
					legend: {
						data: []
					},
					series : [{ data:[]}]
				}
				if(val.reportDetail) {
					val.reportDetail.map((res, index) => {
						pie1.series[0].data.push({name: res.orgName, value: res.quotaValue})
					})		

					pie1.series[0].data = classifyNum(pie1.series[0].data)
					pie1.series[0].data.map(res => {
						pie1.legend.data.push(res.name)
					})
					this.pie1 = merge(this.pie, pie1)
				}					
			}
		},
		nowTitle (val) {			
			// 在库净增删除饼图
			if(val.quotaType == 3 || val.quotaType == 4) {
				this.isPie = false
			} else {
				this.isPie = true
			}
			this.getAchievementTrend();
		}
	},
	mounted () {	
		// 初始化period 、 nowTitle
		this.$store.commit("period", {name: '', val: 1})  		
		this.$store.commit('nowTitle', {quotaType:1, name:'新增借款'}) 
	},
	methods: {
    	// 90天回款率
    	chooseType (nowTitle) {
    		if(this.nowTitle.quotaType == nowTitle.quotaType) return;
    		this.$store.commit('nowTitle', nowTitle) 		
    	},
    	// 更新数据
    	updata () {    		
    		this.getAchievementTrend();
    		this.getActualMajor();
    	},  
    	// 指标实时涨跌报表
    	getActualMajor () {
    		if(!this.orgId) return

    		api.actualMajor({orgId: this.orgId}).then(data => {    
    			this.upData = [
    			{
    				name: '新增借款',
    				value: data.loanAmount,
    				diff: data.loanAmountDiff,
    			},{
    				name: '还款本金',
    				value: data.repayCapital,
    				diff: data.repayDiff,
    			},{
    				name: '在库净增',
    				value: data.loanStorage,
    				diff: data.loanStorageDiff,
    			}
    			]

    			this.$store.commit('nowTitle', {quotaType: 1, name: '新增借款'})

    			this.actualData = data
    			let gauge1 = {series : [ 
    				{
    					axisLine: {           
    						lineStyle: {      
    							color: [[0.65, '#e9666f'], [0.85, '#ffda69'], [1, '#5fda73']]
    						}  
    					},   
    					data : [{ name: '', value: parseInt((data.repay90Ratio.replace('%', ''))).toFixed(0)}]
    				}
    			]}
    					
    			this.gauge1 = merge(this.gauge, gauge1)
    		})
    	},    
    	
    	// 趋势报表
    	getAchievementTrend () {    
    		if(!this.orgId || !this.nowTitle.quotaType) return 		
    		this.trendPost = {
    			orgId: this.orgId,
    			period : this.tagIndex,
    			quotaType: this.nowTitle.quotaType
    		}

    		api.actualTrend(this.trendPost).then(data => {    
    			if(Object.keys(data).length > 0) {
	    			let line1 = {	
	    				legend: {data:[]},		
	    				xAxis :  [{data : data.reportDetail[0].xValueList}],
	    				series: []
	    			}

					// 有百分率的情况
					if(data.reportDetail[0].yValueList[0].match("%")) {
						line1.yAxis =[
							{
								axisLabel: {
									formatter: function (value, index) {
										return numFormat(value, "0", true) + '%'
									}
								}
							}
						]
					}

					data.reportDetail.map((res, index) => {
						let _data = ''
						let _isRatio = false
						// 有百分率的情况
						if(res.yValueList[0].match('%')) {
							_isRatio = true
							_data = []
							res.yValueList.map((r, i) => {
								_data.push(r.replace('%', ''))
							}) 
						} 

						line1.series.push({type: 'line', data: _data || res.yValueList, name: res.quotaTypeName+ (_isRatio ? ' ' : '')}) 
						line1.legend.data.push(res.quotaTypeName + (_isRatio ? ' ' : '')) 
					})	
					this.line1 = merge(this.line, line1)
				} else {
					this.line1 = {}
				}
			}) 
    	},  
    }
}
</script>
<style lang="less" scope>
@import '../../assets/less/base.less';
.actual-main {
	.section-item.section-table {
		padding: 0
	}

	.on {
		background-color: @on-bg;
	}

	.item-part {
		line-height: 1rem;
		text-align: center;		

		&>p {
			&.sum {
				font-weight: bold;
				font-size: .8rem;
			}

			&.up {
				margin: 0 0 .4rem;
				color: @up;
				font-size: .9rem;
			}

			&.down {
				color: @down;
				font-size: .7rem;		
			}

			i {
				font-size: .6rem;
			}

			color: @h1-color;
			text-align: center;
			font-size: .6rem;
			line-height: 1rem;
		}
	}

	.line-des {
		margin: .6rem 0 .4rem;
		text-align: center;
	}

	.text {
		color: @h1-color;
		width: 80%;
		margin: 0 auto;	
		text-align: center;

		.text-name {
			display: block;
		}
		.text-num {
			display: block;
		}
	}
	.text-left {
		float: left;
	}
	.text-right {
		float: right;
		&.text-up {
			color: @up;
		}
		&.text-down {
			color: @down;
		}
	}

	.section-item {
		&:nth-child(1) {
			margin-bottom: 0;
		}
	}	

	.gauge-name{
		margin-top: -1.5rem;
		margin-bottom: .5rem;
	}
}
</style>